<script context="module">
  export async function preload(page, session) {
    if(!session.user) {
      this.error(404, '对不起，请登录之后再使用搜索功能！');
      return;
    }
    this.error(404, '对不起，暂时未开启搜索功能！');
    return;
    const {q} = page.query;
    let {p} = page.query;
		if(!p) {
			p=1;
		}
		p = parseInt(p);
    const response = await this.fetch(`/api2/search?q=${q}&page=${p}&limit=16`);
    const parsed = await response.json();
    return {movies: parsed, q, p};
  }
</script>

<script>
  import VideoBox from "../components/VideoBox.svelte";
  import Topic from "../components/Topic.svelte";
	import Pagination from '../components/Pagination.svelte';
	import { goto, stores } from "@sapper/app";
  export let q;
  export let p;
  export let movies;
  let per_page=16;
  async function changePage(evt){
		const current = evt.detail
		goto(`/search?q=${q}&p=${current}`);
		// list_fetched = ... FETCH DATA HERE
	}
</script>

<svelte:head>
  <title>{q}的搜索结果</title>
</svelte:head>

<h1 class="h3 mb-2 text-gray-800">{q}的搜索结果</h1>
<p class="mb-4">如果搜素结果不理想，请多尝试使用不同的搜索词。</p>
<div class="content">
  {#if movies.topics.length}
    <h4 class="h4 my-4 text-gray-800">影单结果</h4>
    <div class="row">
      {#each movies.topics as topic}
        <div class="px-1 px-card col-6 col-md-3">
          <Topic {topic} />
        </div>
      {/each}
    </div>
  {/if}
  <h4 class="h4 my-4 text-gray-800">资源结果</h4>
  <div class="row">
		{#each movies.movies as movie}
			<div class="px-1 px-card col-6 col-md-3">
				<VideoBox {movie} />
			</div>
    {/each}
    {#if movies.movies.length==0}
      <p class="mx-4">对不起，没有查询到数据，请您更换查询关键词查询</p>
    {/if}
  </div>
  <div class="d-flex justify-content-center mb-4">
		<Pagination rounded bind:current={p} num_items="{per_page * movies.pages}" {per_page} on:navigate={changePage}/>
	</div>
</div>